<template>
	<view class="bulletBox" @click="purchaseTickets = false" v-if="purchaseTickets">
		<view class="purchaseTickets" @click.stop="">
			<view class="list" v-for="(item, index) in data.GoodsSpec">
				<view class="title">选择{{ item.name }}</view>
				<view class="arr flex">
					<view class="item" @click.stop="change(index, i_index)" :class="i_index == select[index] ? 'itemCur' : ''" v-for="(i_item, i_index) in item.spec_value">
						{{ i_item.value }}
					</view>
				</view>
			</view>
			<!-- <view class="btn" @click.stop="initPrice">确认筛选</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: 'bulletBox',
		props: {
			data: {
				type: Object,
				default: () => {},
			},
			indexList: {
				type: Object,
				default: () => {},
			},
		},
		watch: {
			data: {
				handler(newValue, oldValue) {
					for (let i in newValue.GoodsSpec) {
						this.select[i] = 0;
					}
					this.initPrice();
				},
			},
		},
		data() {
			return {
				select: { 0: 0, 1: 0 },
				purchaseTickets: false,
			};
		},
		methods: {
			change(index, i_index) {
				this.select[index] = i_index;
				this.initPrice();
			},
			open() {
				this.purchaseTickets = true;
			},
			colse() {
				this.purchaseTickets = false;
			},
			initPrice() {
				const arr = this.data.GoodsSpec;
				let str = '';
				let ids = '';
				for (let i in arr) {
					const item = arr[i].spec_value[this.select[i] ? this.select[i] : 0];

					ids = ids === '' ? item.id : ids + ',' + item.id;
					str = str === '' ? item.value : str + ',' + item.value;
				}
				
				const price = this.data.GoodsItem[ids].price;
				this.$emit('editPrice', { price, GoodsItem: ids,str });
			},
		},
	};
</script>

<style lang="scss" scoped>
	.bulletBox {
		width: 100%;
		height: 100%;
		z-index: 5;
		position: fixed;
		bottom: 0;
		left: 0;
		.purchaseTickets {
			margin-top: 20rpx;
			background: #ffffff;
			overflow: hidden;
			position: absolute;
			bottom: 0;
			width: 100%;
			padding-bottom: 100rpx;
			.list {
				overflow: hidden;
				.title {
					margin-top: 30rpx;
					margin-left: 30rpx;
					margin-bottom: 20rpx;
					color: #000000;
					font-size: $uni-font-size-12;
				}
				.arr {
					width: 690rpx;
					margin: 20rpx auto;
					align-items: center;
					flex-wrap: wrap;
					.item {
						border-radius: 10rpx;
						border: 1rpx solid #999999;
						color: #999999;
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 18rpx;
						font-size: $uni-font-size-12;
						margin-right: 20rpx;
					}
					.itemCur {
						background: $price-color;
						color: $txt-color;
						border: 1rpx solid $price-color;
					}
				}
			}
			.btn {
				width: 689rpx;
				height: 80rpx;
				background: $price-color;
				border-radius: 40rpx;
				line-height: 80rpx;
				font-size: $uni-font-size-15;
				text-align: center;
				color: #ffffff;
				margin: 30rpx auto;
			}
		}
	}
</style>
